<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Markdown editor</title>

<style>
html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
body {
  background-color: #fff;
  font-size: 15px;
}

code {
  font-family: 'Courier New', Verdana, monospace;
  font-size: 0.875em;   /* 14px, em, not rem */
}

.rewgt-static > * {
  margin: 0.75rem 0px;
}
.rewgt-static pre {
  padding: 6px;
  border: 1px solid #f0f0f0;
  background-color: #f8f8f8;
  line-height: 1;
}
.rewgt-static blockquote {
  padding-left: 1.25rem;
}
.rewgt-static h1, .rewgt-static h2, .rewgt-static h3, .rewgt-static h4, .rewgt-static h5, .rewgt-static h6 {
  margin: 1.875rem 0px 1rem;
}
.rewgt-static strong {
  color: #800;
}

.rewgt-static pre[$] {
  padding: 6px;
  border: 1px solid #dd0;
  background-color: #f8f8f8;
}

#txt-widget {
  margin: 0 0 0 1%;
  width: 97%;
  border: 1px dotted #eee;
  min-height: 160px;
}
#txt-html {
  margin: 0 0 0 1%;
  width: 97%;
  min-height: 160px;
  overflow: auto;
}
</style>
</head>

<body>

<div style='margin:10px'>
  <button id='btn-apply'>Apply</button> <button id='btn-cancel'>Cancel</button>
  <span style='margin:0px 30px'>&nbsp;</span>
  <input type='radio' name='page' id='pg-mark' checked> <label for='pg-mark'>Markdown</label>&nbsp;&nbsp;
  <input type='radio' id='pg-html' name='page'> <label for='pg-html'>HTML</label>&nbsp;&nbsp;
</div>

<div id='txt-widget' style='display:block'>
  <textarea class='editor' style='width:100%; height:100%; min-height:96%'></textarea>
</div>

<div id='txt-html' class='rewgt-static' style='display:none'>
</div>

<script src="output/js/marked.min.js"></script>
<script src="output/js/edit_markdown.js"></script>

</body>
</html>
